<template>
        <div ref="chartDom" class="chars-box">
                
        </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
const chartDom = ref(null);

onMounted(()=>{
   const myChart = echarts.init(chartDom.value);
//   myChart.showLoading();
const options = getChartData();

myChart && myChart.setOption(options);
})
// 获取饼图配制数据
const getChartData = ()=>{
       const option = {
                tooltip: {
                trigger: 'item'
                },
                legend: {
                top: '5%',
                left: 'center',
                show: false
                },
                series: [
                {
                name: '计划生产',
                type: 'pie',
                radius: ['20%', '25%'],
                center:["12%","20%"],
                avoidLabelOverlap: false,
               
                emphasis: {
                        label: {
                        show: true,
                        fontSize: 14,
                        color: 'green',
                        fontWeight: 'bold'
                        }
                },
                labelLine: {
                        show: false
                },
                data: [
                        { 
                          value: 437,
                          name: '计划生产',
                          itemStyle:{
                                color:'blue'
                          },
                          label: {
                                show: true,
                                position: 'center',
                                fontSize:14,
                                fontWeight:600,
                                formatter :(params)=>{
                                const {name,value}=params;
                                return `${name} \n ${value} 台`
                                }
                        },
                        }
                ]
                },
                {
                name: 'fristOuter',
                type: 'pie',
                radius: ['26%', '28%'],
                center:["12%","20%"],
                avoidLabelOverlap: false,
                label: {
                        show: false,
                },

                data: [
                        {
                        value: 100, name: 'wai quan',
                        tooltip: {
                        show: false,
                        }
                     },
                ]
                },
                {
                name: 'dingdan',
                type: 'pie',
                radius: ['20%', '25%'],
                center:["20%","20%"],
                avoidLabelOverlap: false,
                
                emphasis: {
                        label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                        }
                },
                labelLine: {
                        show: false
                },
                data: [
                        { value: 236,
                         name: '已接定单',
                        itemStyle:{
                        color:'blue'
                        },
                        label: {
                                show: true,
                                position: 'center',
                                fontSize: 12,
                                fontWeight:600,
                                color:'red',
                                formatter :(params)=>{
                                const {name,value}=params;
                                return `${name} \n ${value} 台`
                                }
                         }
                        },
                        { value: 228, name: '未接定单',
                        itemStyle:{
                        color:'#ff5533'
                        },
                        label: {
                                show: true,
                        }
                        },    
                ]
                },
                {
                name: 'secouter',
                type: 'pie',
                radius: ['26%', '28%'],
                center:["20%","20%"],
                avoidLabelOverlap: false,
                label: {
                        show: false,
                        position: 'center'
                },
                emphasis: {
                        label: {
                        show: false,
                        fontSize: 14,
                        fontWeight: 'bold'
                        }
                },
                labelLine: {
                        show: false
                },
                data: [
                        { value: 100, name: '' ,tooltip:{show:false}},
                ]
                }
                ]
        };
      return option;
}
</script>
<style lang="scss">
       .chars-box {height: 320px;}  
</style>